<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                >
    <ui:define name="body">
        <div class="main-container" >
            <p:tabMenu id="tab1" model="#{dynamicMenu.getSimpleMenuModel(5)}" style="width: 90%"  />
            <h:form id="form" style="width: 90%" > 
                <p:growl id="growl" showDetail="true" life="3000" />  
                <p:accordionPanel multiple="true" id="formatoInvoice"  activeIndex="0, 2" style="width: 90%">
                    <p:tab title="Invoice">
                        <h:panelGrid id="invoiceHead" columns="9" columnClasses="column" cellpadding="10" >  
                            <h:outputText value="Invoice No:" />
                            <p:inputText value="#{invoiceAllBean.invoice.invoiceNumber}"  style="height: 30px; width: 100px"/> 
                            <h:outputText value="Date: " />
                            <h:outputText value="#{invoiceAllBean.invoice.dateInvoice}" >
                                <f:convertDateTime pattern="dd/MM/yyyy" locale="tr"></f:convertDateTime>
                            </h:outputText>
                            <h:outputText value="Cashbox:" />
                            <p:selectOneMenu value="#{invoiceAllBean.invoice.idCashbox}" converter="#{cashBoxConverter}">  
                                <f:selectItem itemLabel="Select Cashbox" itemValue="" />  
                                <f:selectItems value="#{cashboxBean.PCashboxs}" var="pcashbox" itemLabel="#{pcashbox.location}" itemValue="#{pcashbox}"/>  
                            </p:selectOneMenu>  
                            <!--seller-->
                            <h:outputText value="Sales Person: " />
                            <p:selectOneMenu value="#{invoiceAllBean.seller}" converter="#{userConverter}">
                                <f:selectItem itemLabel="Select Seller" itemValue=""  />
                                <f:selectItems value="#{loginBean.users}" var="sel"
                                               itemLabel="#{sel.userName}" itemValue="#{sel}"/>
                            </p:selectOneMenu>
                            <h:outputText value="Subtotal: " />
                            <p:inputText value="#{invoiceAllBean.invoice.grossValue}"  style="height: 30px; width: 100px" disabled="true"/> 
                            <h:outputText value="VAT: " />
                            <p:inputText value="#{invoiceAllBean.invoice.taxValue}"  style="height: 30px; width: 100px" disabled="true"/> 
                            <h:outputText value="Total: " />
                            <p:inputText value="#{invoiceAllBean.invoice.totalValue}"  style="height: 30px; width: 100px" disabled="true"/> 
                        </h:panelGrid>
                        <h:panelGrid columns="2" cellpadding="5" >  
                            <h:outputText value="Observations : " />
                            <p:inputTextarea value="#{invoiceAllBean.invoice.observations}" rows="5" cols="105"/>
                        </h:panelGrid>
                    </p:tab>   
                    <p:tab title="Customer Information">
                        <h:panelGrid columns="2" columnClasses="column" cellpadding="10" style="width: 90%">  

                            <h:outputText value="Customer: " />
                            <p:autoComplete id="customerPojo" value="#{invoiceAllBean.invoice.idPerson}" completeMethod="#{personBean.completePerson}"   
                                            var="per" itemLabel="#{per.fullName}" itemValue="#{per}" converter="#{personConverter}" forceSelection="true">  
                            </p:autoComplete>  

                            <p:commandButton  value="New" icon="ui-icon-extlink" oncomplete="dialogWidget.show()"/> 


                        </h:panelGrid>
                    </p:tab> 
                    <p:tab title="Products">

                        <p:dataTable id="dataTable" var="prod" value="#{invoiceAllBean.prods}" widgetVar="prodsTable" 
                                     editable="true" editMode="cell"  style="width: 95%"
                                     > 
                            <p:column headerText="SKU">  
                                <h:outputText value="#{prod.idInventory.sku}" />  
                            </p:column>
                            <p:column headerText="Description">  
                                <h:outputText value="#{prod.idInventory.idCatalog.description}" />  
                            </p:column>
                            <p:column headerText="Size">  
                                <h:outputText value="#{prod.idInventory.idSize.description}" />  
                            </p:column>
                            <p:column headerText="Color">  
                                <h:outputText value="#{prod.idInventory.idColor.description}" />  
                            </p:column>
                            <p:column headerText="Unit Value">  
                                <h:outputText value="#{prod.unitValue}" />  
                            </p:column>
                            <p:column headerText="Discount %" >  
                                <p:cellEditor>
                                    <f:facet name="output">
                                        <h:outputText value="#{prod.discountPercentage}" />
                                    </f:facet>
                                    <f:facet name="input">
                                        <h:inputText value="#{prod.discountPercentage}">
                                            <p:ajax event="change" update=":#{p:component('invoiceHead')}, dataTable"   listener="#{invoiceAllBean.updateDiscount(prod)}"/>  
                                        </h:inputText>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Gross Value">  
                                <h:outputText value="#{prod.grossValue}" />  
                            </p:column>
                            <p:column headerText="Tax Value">  
                                <h:outputText value="#{prod.taxValue}" />  
                            </p:column>
                            <p:column headerText="Total Value">  
                                <h:outputText value="#{prod.totalValue}" />  
                            </p:column>
                            <p:column headerText="Remove">  
                                <p:commandButton  icon="ui-icon-close" actionListener="#{invoiceAllBean.removeInvoiceProd(prod)}" update=":#{p:component('invoiceHead')}, dataTable">
                                </p:commandButton>
                            </p:column> 
                            <f:facet name="footer">  
                                #{invoiceAllBean.prods.size()} Elements
                            </f:facet>  

                        </p:dataTable> 
                        <p:commandButton  value="Add" icon="ui-icon-extlink" oncomplete="dialogWidgetAdd.show()" />
                    </p:tab>

                </p:accordionPanel>

                <p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">  
                    <p:graphicImage value="http://localhost:8080/GiantExample-war/resources/img/icons/ajax-loading-bar.gif" />  
                </p:dialog>  

                <h:panelGrid columns="2" cellpadding="5" style="border-bottom-width: 30px">  
                    <p:commandButton  value="Clear" icon="cancel" action="#{invoiceAllBean.clearInvoice()}" ajax="false"> </p:commandButton> 
                    <p:commandButton  value="Submit" icon="confirm" action="invoiceNew" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);"> 
                        <p:fileDownload value="#{invoiceAllBean.saveInvoice()}"/>  
                    </p:commandButton>
                </h:panelGrid>

                <p:dialog widgetVar="dialogWidgetAdd" header="Add Product" >
                    <h:panelGrid id="productsPanel" columns="4" columnClasses="column" cellpadding="10"> 
                        <h:outputText value="SKU No : " />
                        <p:inputText value="#{invoiceAllBean.tmpSku}"  style="height: 30px; width: 200px"/> 
                        <h:outputText value="Quantity : " />
                        <p:inputText value="#{invoiceAllBean.tmpQuantityProd}"  style="height: 30px; width: 70px"/>
                    </h:panelGrid>
                    <div align="center">
                        <p:commandButton  value="Add" icon="confirm" action="#{invoiceAllBean.addProductToInvoice()}" ajax="false" process="@this,productsPanel"> </p:commandButton> 
                    </div>
                </p:dialog>


                <p:dialog widgetVar="dialogWidget" width="70%" height="380px" header="New Costumer Information">

                    <h:panelGrid id="personPanel" columns="4" columnClasses="column" cellpadding="10">  

                        <h:outputText value="Type Nature: " />
                        <p:selectOneMenu value="#{personBean.person.idTypeNature}" converter="#{typeNatureConverter}">
                            <f:selectItem itemLabel="Select Type Nature" itemValue=""  />
                            <f:selectItems value="#{typeNatureBean.typeNatures}" var="nat"
                                           itemLabel="#{nat.description}" itemValue="#{nat}"/>
                        </p:selectOneMenu>

                        <h:outputText value="*Name : " />
                        <p:inputText value="#{personBean.person.name}"  style="height: 30px; width: 250px"/>
                        <h:outputText value="*Last Name : " />
                        <p:inputText value="#{personBean.person.lastName}"  style="height: 30px; width: 250px"/>
                        <h:outputText value="*Corp Name : " />
                        <p:inputText value="#{personBean.person.corpName}"  style="height: 30px; width: 250px"/>
                        <h:outputText value="*E-mail : " />
                        <p:inputText value="#{personBean.person.email}"  style="height: 30px; width: 250px"/> 
                        <h:outputText value="Address : " />
                        <p:inputText value="#{personBean.person.address}"  style="height: 30px; width: 250px"/>
                        <h:outputText value="Telephone : " />
                        <p:inputText value="#{personBean.person.telephone}"  style="height: 30px; width: 200px"/>
                        <h:outputText value="Mobile : " />
                        <p:inputText value="#{personBean.person.mobile}"  style="height: 30px; width: 200px"/> 
                        <h:outputText value="ID No / VAT No:" />
                        <p:inputText value="#{personBean.person.vatNumber}" id="vat"  style="height: 30px; width: 250px" /> 
                        <h:outputText value="VAT Office: "  />
                        <p:inputText value="#{personBean.person.vatOffice}"  style="height: 30px; width: 200px"/>

                        <h:outputText value="Is Dealer Customer: " />  
                        <p:selectBooleanCheckbox value="#{personBean.person.dealer}">   
                        </p:selectBooleanCheckbox> 
                        <p:selectOneMenu value="#{personBean.person.idTypeDealer}" converter="#{typeDealerConverter}">
                            <f:selectItem itemLabel="Select Type Dealer" itemValue=""  />
                            <f:selectItems value="#{typeDealerBean.typeDealers}" var="del"
                                           itemLabel="#{del.description}" itemValue="#{del}"/>
                        </p:selectOneMenu>


                    </h:panelGrid>
                    <div align="center">
                        <p:commandButton  value="Save" icon="confirm" actionListener="#{personBean.savePerson()}" ajax="false" process="@this,personPanel" onclick="PrimeFaces.monitorDownload(start, stop);"/>
                    </div>

                </p:dialog>

            </h:form>  

            <script type="text/javascript">
                        function start() {
                            statusDialog.show();
                        }

                        function stop() {
                            statusDialog.hide();
                            window.location = '#{request.contextPath}/pos/InvoiceNew.xhtml';
                        }
            </script>  

        </div>    
    </ui:define>
</ui:composition>